<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试</title>
</head>

<body>
    <!-- IMPORT JS -->
    <script>
        const list = [1, 2, 3];
        const square = num => {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(num * num);
                }, 1000);
            });
        }
        /*
        function test() {
            list.forEach(async x => {
                const res = await square(x);
                console.log(res);
            });
        }
        test();
        */
        // 1.代码运行后会输出什么结果？请写出来
        //   每一次forEach迭代，基于await创建一个异步微任务「1秒后获取promise成功态结果，然后输出」；然后不等待，迭代操作继续...
        //   当三次迭代操作结束，时间过了1秒后，之前设置的三个微任务皆已可执行，所以会依次输出：1 4 9

        // 2.如果希望每隔1s输出一个结果，应该怎么改？请修改里面的代码
        // 方案一：递归处理
        /* let n = 0;
        async function test() {
            if (n >= list.length) return;
            let x = list[n++];
            let res = await square(x);
            console.log(res);
            test();
        }
        test(); */

        // 方案二：基于for await...of循环
        async function test() {
            let n = 0;
            list[Symbol.asyncIterator] = async function* () {
                /* yield square(list[n++]);
                yield square(list[n++]);
                yield square(list[n++]); */
                // 简写
                while (n < list.length) {
                    yield square(list[n++]);
                }
            };
            for await (let res of list) {
                console.log(res);
            }
        }
        test();
    </script>
</body>

</html>